{%  extends 'base.html' %}
{% load static %}
{% block content %}
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">服务器告警</li>
    <li lay-id="22">日志告警</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show"><div class="layui-tab layui-tab-card" lay-filter="page-tab" >
    <!--tab标题-->
    <!--tab内容-->
    <div class="layui-tab-content" id="tabContainers">
        <div class="layui-tab-item layui-show" style="width:100%;height:100%">
         <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
         <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
       </div>
        </script>
        </div>
    </div>
</div></div>
    <div class="layui-tab-item">内容2</div>
  </div>
</div>
{% endblock %}
{% block js %}
<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,url:'/monitor/recordjson'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'instanceName', title:'实例名称', width:250, edit: 'text'}
      ,{field:'metricName', title:'监控项', width:120, edit: 'text'}
      ,{field:'curValue', title:'当前值', width:80, sort: true}
      ,{field:'triggerLevel', title:'告警级别', width:80, edit: 'text'}
      ,{field:'dimensions', title:'报警对象', width:500, edit: 'text'}
      ,{field:'timestamp', title:'日期', width:200,sort: true}
    ]]
    ,page: true
  });

  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });
});
</script>
{% endblock %}
















